/**
 * @author 杨执信
 * @component 头部组件，展示座右铭，页面导航
*/
import React from 'react';
import styles from '../../styles/conponents/header.module.css'
import { Row, Col, Menu, Divider } from 'antd'
import { HomeOutlined, YoutubeOutlined, SmileOutlined } from '@ant-design/icons'
import Router from 'next/router'

export const Header = () => {
    return (
        <div className={styles.header}>
            <Row type='flex' justify="center">
                <Col xs={24} sm={24} md={10} lg={15} xl={11}>
                    <span className={styles.header_logo}>滑稽鸭</span>
                    <span className={styles.header_txt}>向前端攻城狮发起冲击</span>
                </Col>
                <Col xs={0} sm={0} md={14} lg={8} xl={7}>
                    <Menu mode="horizontal">
                        <Menu.Item key="home" className={styles.menu_item} onClick={() => { Router.push('/') }}>
                            <HomeOutlined className={styles.iconItem} />
                            首页
                        </Menu.Item>
                        <Menu.Item key="video" className={styles.menu_item} onClick={() => { Router.push('/study') }}>
                            <YoutubeOutlined className={styles.iconItem} />
                            日常学习
                        </Menu.Item>
                        <Menu.Item key="life" className={styles.menu_item} onClick={() => { Router.push('/share') }}>
                            <SmileOutlined className={styles.iconItem} />
                            技巧分享
                        </Menu.Item>
                    </Menu>
                </Col>
            </Row>
        </div>
    )
}

